<template>
  <div>
    <el-table
      :data="tables"
      :loading="loading"
      overflow-x="scroll"
    >
      <el-table-column
        prop="number"
        label="序号"
        type="index"
        align="center"
        width="70"
      />
      <el-table-column
        prop="columnName"
        label="列名"
        align="center"
        width="150"
      />
      <el-table-column
        prop="columnType"
        label="列类型"
        align="center"
        width="150"
      />
      <el-table-column
        prop="nullable"
        label="不为空"
        align="center"
      >
        <template slot="header">
          不为空
          <el-tooltip effect="dark" content="表字段设计中不为null" placement="top">
            <i class="el-icon-info" style="width: 10px;height: 10px;" />
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.nullable" disabled :true-label="0" :false-label="1" />
        </template>
      </el-table-column>
      <el-table-column
        prop="columnRemarks"
        label="列描述"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.columnRemarks" />
        </template>
      </el-table-column>
      <el-table-column
        prop="javaName"
        label="Java命名"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.javaName" />
        </template>
      </el-table-column>
      <el-table-column
        prop="javaType"
        label="Java类型"
        align="center"
        width="150"
      >
        <template slot-scope="scope">
          <el-select v-model="scope.row.javaType">
            <el-option
              v-for="(item, index) in javaTypeList"
              :key="index"
              :label="item.label"
              :value="item.code"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        prop="listShow"
        label="列表显示"
        align="center"
        width="100"
      >
        <template slot="header" slot-scope="scope">
          列表显示
          <el-tooltip effect="dark" content="勾选则生成代码在列表显示该列" placement="top">
            <i class="el-icon-info" style="width: 10px;height: 10px;" />
          </el-tooltip><br>
          <el-checkbox
            v-model="listShow.check"
            :indeterminate="listShow.isIndeterminate"
            @change="(val) => checkboxAllChange(val, 'listShow')"
          />
        </template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.listShow"
            :true-label="0"
            :false-label="1"
            @change="(val) => checkboxChange(val, 'listShow')"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="isForm"
        label="表单编辑"
        align="center"
        width="100"
      >
        <template slot="header" slot-scope="scope">
          表单编辑
          <el-tooltip effect="dark" content="勾选则生成代码在新增/编辑表单时需要填写该列" placement="top">
            <i class="el-icon-info" style="width: 10px;height: 10px;" />
          </el-tooltip><br>
          <el-checkbox
            v-model="isForm.check"
            :indeterminate="isForm.isIndeterminate"
            @change="(val) => checkboxAllChange(val, 'isForm')"
          />
        </template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.isForm"
            :true-label="0"
            :false-label="1"
            @change="(val) => checkboxChange(val, 'isForm', scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="isKeyword"
        label="关键词搜索"
        align="center"
        width="110"
      >
        <template slot="header" slot-scope="scope">
          关键词搜索
          <el-tooltip effect="dark" content="勾选则生成代码在列表使用关键词搜索时可搜索该列" placement="top">
            <i class="el-icon-info" style="width: 10px;height: 10px;" />
          </el-tooltip><br>
          <el-checkbox
            v-model="isKeyword.check"
            :indeterminate="isKeyword.isIndeterminate"
            @change="(val) => checkboxAllChange(val, 'isKeyword')"
          />
        </template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.isKeyword"
            :true-label="0"
            :false-label="1"
            @change="(val) => checkboxChange(val, 'isKeyword')"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="isAdvancedSearch"
        label="高级搜索"
        align="center"
        width="100"
      >
        <template slot="header" slot-scope="scope">
          高级搜索
          <el-tooltip effect="dark" content="勾选则生成代码在列表使用高级搜索时可搜索该列" placement="top">
            <i class="el-icon-info" style="width: 10px;height: 10px;" />
          </el-tooltip><br>
          <el-checkbox
            v-model="isAdvancedSearch.check"
            :indeterminate="isAdvancedSearch.isIndeterminate"
            @change="(val) => checkboxAllChange(val, 'isAdvancedSearch')"
          />
        </template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.isAdvancedSearch"
            :true-label="0"
            :false-label="1"
            @change="(val) => checkboxChange(val, 'isAdvancedSearch')"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="isRequired"
        label="是否必填"
        align="center"
        width="100"
      >
        <template slot="header" slot-scope="scope">
          是否必填
          <el-tooltip effect="dark" content="勾选则生成代码在新增/编辑时对该列进行表单必填校验" placement="top">
            <i class="el-icon-info" style="width: 10px;height: 10px;" />
          </el-tooltip><br>
          <el-checkbox
            v-model="isRequired.check"
            :indeterminate="isRequired.isIndeterminate"
            @change="(val) => checkboxAllChange(val, 'isRequired')"
          />
        </template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.isRequired"
            :true-label="0"
            :false-label="1"
            @change="(val) => checkboxChange(val, 'isRequired')"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="isExcel"
        label="导入导出"
        align="center"
        width="100"
      >
        <template slot="header" slot-scope="scope">
          导入导出
          <el-tooltip effect="dark" content="勾选则生成代码在导入/导出时可导入导出该列" placement="top">
            <i class="el-icon-info" style="width: 10px;height: 10px;" />
          </el-tooltip><br>
          <el-checkbox
            v-model="isExcel.check"
            :indeterminate="isExcel.isIndeterminate"
            @change="(val) => checkboxAllChange(val, 'isExcel')"
          />
        </template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.isExcel"
            :true-label="0"
            :false-label="1"
            @change="(val) => checkboxChange(val, 'isExcel')"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="optElement"
        label="操作组件"
        align="center"
        width="180"
      >
        <template slot="header">
          操作组件
          <el-tooltip effect="dark" content="表单新增/编辑时使用的操作组件" placement="top">
            <i class="el-icon-info" style="width: 10px;height: 10px;" />
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-select v-model="scope.row.optElement">
            <el-option
              v-for="(item, index) in optElementList"
              :key="index"
              :label="item.label"
              :value="item.code"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        prop="dictDomainCode"
        label="字典域编码"
        align="center"
        width="300"
      >
        <template slot="header">
          字典域编码
          <el-tooltip effect="dark" placement="top">
            <div slot="content">
              当table中的列描述符合' #A：xxx，B：xxx... '格式时（不区分中英文符号），<br>
              系统将根据 '表名_字段名' 生成字典域编码，并生成相关字典sql语句<br>
              此时也可以自定义字典域编码或使用数据字典域中已定义的编码
            </div>
            <i class="el-icon-info" style="width: 10px;height: 10px;" />
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.dictDomainCode"
            style="width: 100%;"
            filterable
            allow-create
            remote
            default-first-option
            clearable
            :loading="selectLoading"
            :remote-method="remoteMethod"
            placeholder="输入编码搜索"
          >
            <el-option
              v-for="(dict, index) in dictOptions"
              :key="index"
              :label="dict.code"
              :value="dict.code"
            >
              <div>
                <el-tooltip placement="left-start">
                  <span>{{ dict.code }}</span>
                  <div slot="content">
                    <span style="float: left;">{{ dict.code }}</span>
                    <span style="float: right;margin-left: 15px;">{{ dict.name }}</span>
                  </div>
                </el-tooltip>
              </div>
            </el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;align-items: center;justify-content: center;margin-top: 10px;">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button type="info" @click="reset">重置</el-button>
      <el-button @click="close">返回</el-button>
    </div>
  </div>
</template>

<script>
import { tableConfig, list, updateColumn, resetColumn } from '@/api/dev/gen-config'
import * as API_dict_domain from '@/api/system/data-dict-domain'
import { toLastView } from '@/utils'

export default {
  data() {
    return {
      // 加载开关
      loading: false,
      selectLoading: false, // 下拉框搜索loading
      listShow: {
        check: false,
        isIndeterminate: true
      },
      isForm: {
        check: false,
        isIndeterminate: true
      },
      isKeyword: {
        check: false,
        isIndeterminate: true
      },
      isAdvancedSearch: {
        check: false,
        isIndeterminate: true
      },
      isRequired: {
        check: false,
        isIndeterminate: true
      },
      isExcel: {
        check: false,
        isIndeterminate: true
      },
      optElementList: [], // 操作组件数组
      javaTypeList: [], // Java类型数组
      tables: [], // 表信息
      dictOptions: [], // 字典信息
      tableConfig: {} // 表配置信息
    }
  },
  async created() {
    this.init()
    // 通过全局方法取数据字典
    this.optElementList = await this.getDictInfo('generate_column_opt_element')
    this.javaTypeList = await this.getDictInfo('generate_column_java_type')
  },
  methods: {
    // 页面初始化
    init() {
      const tableName = this.$route.params.tableName
      if (tableName) {
        // 获取表配置信息
        tableConfig({ tableName }).then(res => {
          this.tableConfig = res.data
          const excludeField = res.data.excludeField || []
          // 获取列配置
          list({ tableName }).then(res => {
            this.tables = res.data.filter(item => !excludeField.includes(item.javaName))
            this.handlerTables(this.tables)
          })
        })
      }
    },
    // 处理表格列
    handlerTables(tables) {
      let listShowLength = 0
      let isFormLength = 0
      let isKeywordLength = 0
      let isAdvancedSearchLength = 0
      let isRequiredLength = 0
      let isExcelLength = 0
      const tablesLength = tables.length
      tables.forEach(item => {
        if (item.listShow === 0) {
          listShowLength++
        }
        if (item.isForm === 0) {
          isFormLength++
        }
        if (item.isKeyword === 0) {
          isKeywordLength++
        }
        if (item.isAdvancedSearch === 0) {
          isAdvancedSearchLength++
        }
        if (item.isRequired === 0) {
          isRequiredLength++
        }
        if (item.isExcel === 0) {
          isExcelLength++
        }
      })
      if (tablesLength === listShowLength || listShowLength === 0) {
        this.listShow = {
          check: listShowLength !== 0,
          isIndeterminate: false
        }
      }
      if (tablesLength === isFormLength || isFormLength === 0) {
        this.isForm = {
          check: isFormLength !== 0,
          isIndeterminate: false
        }
      }
      if (tablesLength === isKeywordLength || isKeywordLength === 0) {
        this.isKeyword = {
          check: isKeywordLength !== 0,
          isIndeterminate: false
        }
      }
      if (tablesLength === isAdvancedSearchLength || isAdvancedSearchLength === 0) {
        this.isAdvancedSearch = {
          check: isAdvancedSearchLength !== 0,
          isIndeterminate: false
        }
      }
      if (tablesLength === isRequiredLength || isRequiredLength === 0) {
        this.isRequired = {
          check: isRequiredLength !== 0,
          isIndeterminate: false
        }
      }
      if (tablesLength === isExcelLength || isExcelLength === 0) {
        this.isExcel = {
          check: isExcelLength !== 0,
          isIndeterminate: false
        }
      }
    },
    // 远程搜索数据字典域
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        const params = {
          pageNum: 1,
          pageSize: 100,
          code: query.trim()
        }
        API_dict_domain.list(params).then(res => {
          this.dictOptions = res.data.records
        }).finally(() => {
          this.loading = false
        })
      } else {
        this.dictOptions = []
      }
    },
    // 列checkbox切换
    checkboxChange(val, name, row) {
      if (row && val === 1) {
        row.isRequired = 1
      }
      let length = 0
      this.tables.forEach(item => {
        if (item[name] === 0) {
          length++
        }
      })
      if (length === 0 || length === this.tables.length) {
        this[name].check = length !== 0
        this[name].isIndeterminate = false
      } else {
        this[name].isIndeterminate = true
      }
    },
    // 指定列全选/全不选
    checkboxAllChange(val, name) {
      this[name].isIndeterminate = false
      this.tables.forEach(item => {
        item[name] = val ? 0 : 1
      })
    },
    // 保存
    submit() {
      updateColumn(this.tables).then(res => {
        this.$message.success('保存成功')
        this.close()
      })
    },
    // 重置
    reset() {
      this.$confirm('此操作将重置当前配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetColumn(this.tableConfig.tableName).then(res => {
          this.init()
          this.$message.success('重置成功')
        })
      }).catch(() => {})
    },
    // 关闭页面
    close() {
      this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
        toLastView(visitedViews, this.$route)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  ::v-deep .el-table .el-table__body-wrapper {
    max-height: 62vh !important;
    overflow-y: auto;
  }
</style>
